<template>
	<view class="sex">
		<view class="line"></view>
		<view class="con">
			<view class="list" @click="changeSex(1)" >
				<text>男</text>
				<image class="icon-right" v-show="isShow" src="../../static/images/icon-right.png"></image>
			</view>
			<view class="list" @click="changeSex(2)">
				<text>女</text>
				<image class="icon-right" v-show="!isShow" src="../../static/images/icon-right.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const isShow=ref(true)
	const changeSex=(val)=>{
		if(val===1){
			isShow.value=true
		}else{
			isShow.value=false
		}
	}
</script>

<style scoped lang="scss">
	   .sex{
		   .line{
		      height: 1px;
		      background-color: #252731;
		   }
		   .con{
			   background-color: #4A4C52;
			   border-radius: 20rpx;
			   margin:40rpx;
			   .list{
				   padding:30rpx;
				   display: flex;
				   justify-content: space-between;
			   }
			   .icon-right{
				   width: 40rpx;
				   height: 50rpx;
			   }
		   }
	   }    
</style>
